// 封装函数式调用组件

// 俩个前置的方法 vue底层的api

// 1. createVNode: 创建虚拟dom
// 2. render: 把createVNode创建出来的虚拟dom生成真实的dom

import { createVNode, render } from 'vue'
import _Message from './index.vue'
function Message ({ type, text }) {
  // type: 决定当前弹框的类型 成功 失败 警告
  // text: 弹框的文案是什么
  // 核心目标: 以当前参数type + text为prop把Message渲染出来
  // 1. 使用createVNode方法以 Message组件作为第一个参数  以type + text作为第二个参数 prop
  // 2. 自己准备一个临时挂载的节点位置
  // 3. 使用render方法把虚拟dom渲染为真实的dom 并且找一个挂载的地方渲染到浏览器
  const vNode = createVNode(
    _Message,
    {
      type, text
    }
  )
  const container = document.createElement('div')
  document.body.appendChild(container)
  render(vNode, container)

  // 1s中以后销毁
  setTimeout(() => {
    render(null, container)
  }, 1000)
}

export default Message

// 1. 了解函数式组件的优势  - 灵活性强
// 2. createVNode -> vnode -> render -> dom
